<template>
    <view class="container">
        <view class="content">
            <view class="input-group">
                <view class="input-row border">
                    <text class="title">手机号：</text>
                    <m-input class="m-input" type="text" clearable focus v-model="phone" placeholder="请输入手机号"></m-input>
                </view>
                <view class="input-row">
                    <text class="title">验证码：</text>
                    <m-input type="text" clearable v-model="vcode" placeholder="请输入验证码"></m-input>
					<button class="mini-btn" plain type="primary" size="mini" @tap="getVcode">获取验证码</button>
                </view>
            </view>
            <view class="btn-row">
                <button type="primary" class="primary" @tap="bindLogin">登录</button>
            </view>
            <view class="action-row">
				<navigator url="../login/login">邮箱登录</navigator>
				<text>|</text>
                <navigator url="../reg/phone">注册账号</navigator>
                <text>|</text>
                <navigator url="../pwd/phone">忘记密码</navigator>
            </view>
        </view>
    </view>
</template>

<script>
    import service from '../../service.js';
	import network from '../../common/network.js';
	import validator from '../../common/validator.js';
	import sha1 from 'crypto-js/sha1.js'

    import {
        mapState,
        mapMutations
    } from 'vuex'
    import mInput from '../../components/m-input.vue'

    export default {
        components: {
            mInput
        },
        data() {
            return {
                providerList: [],
                hasProvider: false,
                phone: '',
                vcode: '',
                positionTop: 0
            }
        },
        methods: {
            ...mapMutations(['login', 'setUserInfo']),
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
            bindLogin() {
				if (!validator.isValidPhone(this.phone) || !validator.isValidVcode(this.vcode)) {
					return
				}
				
                const self = this;
                // 登录
                network.request("/sessions/", 'POST',
                    {
                        "phone": this.phone,
                        "vcode": this.vcode
                    },
                    function(res) { // 登录成功后，获取用户信息
                        console.log("登录成功后:" + JSON.stringify(res));
                        const id = res.id;
                        const token = res.token;
                        network.requestWithHeader('/api/frontend/users/'+res.id, 'GET', {'X-Token': token},
                            {},
                            function(res) {
								console.log("获取用户信息后:" + JSON.stringify(res));
                                res.id = id;
                                res.token = token;
                                self.toMain(res);
                            });
                    });
            },
			toMain(user) {
				this.login(user.username);
				this.setUserInfo(user);
				//service.addUser()
				uni.reLaunch({
					url: '../home/main'
				})
			},
			getVcode() {
				if (!validator.isValidPhone(this.phone)) {
					return
				}
				
				// 获取验证码
				network.request('/api/frontend/sms_code/?phone='+this.phone, 'POST',
					{},
					function(res) {
						console.log("vcode:" + JSON.stringify(res))
						uni.showToast({
						    title: '获取验证码成功'
						});
						
						// TOOD 禁用获取验证码按钮，启动定时器
					});
			}
        },
        onReady() {
            this.initPosition();
        }
    }
</script>

<style>
@import '../../common/custom.css';
</style>
